import React, { Component } from 'react';
import { Table, message, Tag, Typography, Tabs } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {
  queryShouldExam,
  queryCompletedExam,
  queryOpenExam,
  applyExamination,
  queryRuningExam,
  startExam,
  restartExam,
} from '../../../api3';
import { examInstructions } from '../../../api3/promptMessage';
import HasPermi from '../../../componentJsx/common/hasPermi';
import NewModal from '../../../componentJsx/common/NewModal';
import AdvancedSearchForm from '../../../componentJsx/common/searchForm';
import 'antd/dist/antd.css';
import { getUrl } from '../../../utils';
import '../../../componentCss/component.css';
//import '../index.css';
//字典
import { getDictionaryLabel } from '../../../rudexRou/OperatesCookie.js';
const { Text } = Typography;
class MyExam extends Component {
  constructor(props) {
    super(props);
    this.state = {
      runningModalVisible: false,
      runningTableColumns: [
        {
          title: '考试名称',
          dataIndex: 'examName',
          key: 'examName',
          width: 240,
          fixed: 'left',
          ellipsis: true,
        },

        {
          title: '参与考试时间',
          dataIndex: 'startTime',
          key: 'startTime',
          ellipsis: true,
          width: 140,
          // render: (text) =>
          //   text ? moment(text).format('YYYY-MM-DD HH:mm') : text,
        },

        {
          title: '操作',
          dataIndex: 'handle',
          ellipsis: true,
          width: 100,
          align: 'center',
          render: (_, record) => (
            <HasPermi
              bottonData={{
                type: 'link',
                size: 'small',
                interceptor: 'tmfsExamPlatform:myExam:join',
                clickFn: () => this.showJoinModal(record.id, record),
                text: '继续考试',
              }}
            />
          ),
        },
      ],
      applyModalVisible: false,
      deleteModalVisible: false, //删除的模态框
      confirmLoading: false, //确认按钮异步等待
      tableLoading: false, //表格等待
      // selectedRowKeys: [], //最新表格多选
      // selectedRows: [],
      //分页
      total: 0,
      pageSize: 10,
      page: 1,
      //数据
      tableData: [], //最新数据
      //表格列
      completedTableColumns: [
        {
          title: '考试名称',
          dataIndex: 'name',
          key: 'name',
          width: 240,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '考试类型',
          dataIndex: 'open',
          key: 'open',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('testExamType', text) : text,
        },
        {
          title: '考试级别',
          dataIndex: 'level',
          key: 'level',
          width: 80,
          ellipsis: true,
          render: (text) =>
            text ? getDictionaryLabel('examLevel', text) : text,
        },
        {
          title: '考试语言',
          dataIndex: 'language',
          key: 'language',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('language', text) : text,
        },
        {
          title: '有效期',
          dataIndex: 'validityBeginDate',
          key: 'validityBeginDate',
          ellipsis: true,
          width: 200,
          render: (t, r) =>
            t
              ? moment(t).format('YYYY-MM-DD') +
                ' 至 ' +
                moment(r.validityEndDate).format('YYYY-MM-DD')
              : r.validity == '1'
              ? '永久有效'
              : '一次性',
        },
        {
          title: '参与考试时间',
          dataIndex: 'startTime',
          key: 'startTime',
          ellipsis: true,
          width: 160,
          render: (text) =>
            text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : text,
        },
        {
          title: '考试时长(min)',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 120,
        },
        {
          title: '总分',
          dataIndex: 'totalScore',
          key: 'totalScore',
          ellipsis: true,
          width: 80,
        },
        {
          title: '及格分',
          dataIndex: 'passScore',
          key: 'passScore',
          ellipsis: true,
          width: 80,
        },

        {
          title: '考试次数',
          dataIndex: 'count',
          key: 'count',
          ellipsis: true,
          width: 80,
          align: 'center',
        },
        {
          title: '考试成绩',
          dataIndex: 'myScore',
          key: 'myScore',
          ellipsis: true,
          width: 80,
          render: (text) => (text == '-1' ? '未发布' : text),
        },
        {
          title: '是否通过',
          dataIndex: 'pass',
          key: 'pass',
          ellipsis: true,
          width: 120,
          render: (text, record) =>
            record.myScore != '-1'
              ? text
                ? text == '0'
                  ? record.cheat == '1'
                    ? '未通过(作弊)'
                    : '未通过'
                  : '通过'
                : text
              : '',
        },
        {
          title: '阅卷人',
          dataIndex: 'examiner',
          key: 'examiner',
          ellipsis: true,
          width: 100,
          render: (text, record) =>
            record.myScore === 0 && record.pass == '0' && !text ? '系统' : text,
        },
        {
          title: '阅卷时间',
          dataIndex: 'markingTime',
          key: 'markingTime',
          ellipsis: true,
          width: 160,
          render: (text) =>
            text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : text,
        },
        {
          title: '考试状态',
          dataIndex: 'examStatus',
          key: 'examStatus',
          ellipsis: true,
          width: 100,
          align: 'center',
          fixed: 'right',
          render: (t, r) => {
            switch (t) {
              case 0:
                return <Tag color='#f50'>未考</Tag>;
              case 1:
                return <Tag color='#2db7f5'>考试中</Tag>;
              case 2:
                return <Tag color='#87d068'>已完成</Tag>;
              case 3:
                return <Tag color='#cd201f'>缺考</Tag>;
              default:
                break;
            }
          },
        },
        {
          title: '操作',
          dataIndex: 'handle',
          ellipsis: true,
          width: 70,
          fixed: 'right',
          align: 'center',
          render: (_, record) => (
            <HasPermi
              bottonData={{
                type: 'link',
                size: 'small',
                interceptor: 'tmfsExamPlatform:myExam:join',
                clickFn: () => this.showJoinModal(record.id, record),
                text: '重考',
                disabled:
                  record.validity != '1' && !record.validityBeginDate
                    ? true
                    : false,
              }}
            />
          ),
        },
      ],
      shouldTableColumns: [
        {
          title: '考试名称',
          dataIndex: 'name',
          key: 'name',
          width: 240,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '考试类型',
          dataIndex: 'open',
          key: 'open',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('testExamType', text) : text,
        },
        {
          title: '考试级别',
          dataIndex: 'level',
          key: 'level',
          width: 80,
          ellipsis: true,
          render: (text) =>
            text ? getDictionaryLabel('examLevel', text) : text,
        },
        {
          title: '考试语言',
          dataIndex: 'language',
          key: 'language',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('language', text) : text,
        },
        {
          title: '有效期',
          dataIndex: 'validityBeginDate',
          key: 'validityBeginDate',
          ellipsis: true,
          width: 200,
          render: (t, r) =>
            t
              ? moment(r.validityBeginDate).format('YYYY-MM-DD') +
                ' 至 ' +
                moment(r.validityEndDate).format('YYYY-MM-DD')
              : r.validity == '1'
              ? '永久有效'
              : '一次性',
        },
        {
          title: '考试开始时间',
          dataIndex: 'startTime',
          key: 'startTime',
          ellipsis: true,
          width: 140,
          render: (text) =>
            text ? moment(text).format('YYYY-MM-DD HH:mm') : text,
        },
        {
          title: '考试时长(min)',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 120,
        },
        {
          title: '总分',
          dataIndex: 'totalScore',
          key: 'totalScore',
          ellipsis: true,
          width: 80,
        },
        {
          title: '及格分',
          dataIndex: 'passScore',
          key: 'passScore',
          ellipsis: true,
          width: 80,
        },
        {
          title: '阅卷人',
          dataIndex: 'examiner',
          key: 'examiner',
          ellipsis: true,
          width: 100,
          // render: (t, r) => t + `(${r.createEmpNo})`,
        },
        {
          title: '考试状态',
          dataIndex: 'examStatus',
          key: 'examStatus',
          ellipsis: true,
          width: 100,
          align: 'center',
          fixed: 'right',
          render: (t, r) => {
            switch (t) {
              case 0:
                return <Tag color='#f50'>未考</Tag>;
              case 1:
                return <Tag color='#2db7f5'>考试中</Tag>;
              case 2:
                return <Tag color='#87d068'>已完成</Tag>;
              case 3:
                return <Tag color='#cd201f'>缺考</Tag>;
              default:
                break;
            }
          },
        },
        {
          title: '操作',
          dataIndex: 'handle',
          ellipsis: true,
          width: 96,
          fixed: 'right',
          align: 'center',
          render: (text, record) => (
            <HasPermi
              bottonData={{
                type: 'link',
                size: 'small',
                interceptor: 'tmfsExamPlatform:myExam:join',
                clickFn: () => this.showJoinModal(record.id, record),
                text: record.examStatus === 1 ? '继续考试' : '参加考试',
              }}
            />
          ),
        },
      ],
      openTableColumns: [
        {
          title: '考试名称',
          dataIndex: 'name',
          key: 'name',
          width: 240,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '考试类型',
          dataIndex: 'open',
          key: 'open',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('testExamType', text) : text,
        },
        {
          title: '考试级别',
          dataIndex: 'level',
          key: 'level',
          width: 80,
          ellipsis: true,
          render: (text) =>
            text ? getDictionaryLabel('examLevel', text) : text,
        },
        {
          title: '考试语言',
          dataIndex: 'language',
          key: 'language',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('language', text) : text,
        },
        {
          title: '有效期',
          dataIndex: 'validityBeginDate',
          key: 'validityBeginDate',
          ellipsis: true,
          width: 200,
          render: (t, r) =>
            t
              ? moment(r.validityBeginDate).format('YYYY-MM-DD') +
                ' 至 ' +
                moment(r.validityEndDate).format('YYYY-MM-DD')
              : r.validity == '1'
              ? '永久有效'
              : '一次性',
        },

        {
          title: '考试开始时间',
          dataIndex: 'startTime',
          key: 'startTime',
          ellipsis: true,
          width: 140,
          render: (text) =>
            text ? moment(text).format('YYYY-MM-DD HH:mm') : text,
        },
        {
          title: '考试时长(min)',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 120,
        },
        {
          title: '考试次数',
          dataIndex: 'count',
          key: 'count',
          ellipsis: true,
          width: 80,
          render: (t) => (t == '0' ? '无限次' : t),
        },
        {
          title: '总分',
          dataIndex: 'totalScore',
          key: 'totalScore',
          ellipsis: true,
          width: 80,
        },
        {
          title: '及格分',
          dataIndex: 'passScore',
          key: 'passScore',
          ellipsis: true,
          width: 80,
        },

        // {
        //   title: '题目数',
        //   dataIndex: 'questionList',
        //   key: 'questionList',
        //   ellipsis: true,
        //   width: 80,
        //   render: (t, r) => (r.questionList ? r.questionList.length : ''),
        // },

        {
          title: '操作',
          dataIndex: 'handle',
          ellipsis: true,
          width: 120,
          fixed: 'right',
          align: 'center',
          render: (_, record) => (
            <HasPermi
              bottonData={{
                type: 'link',
                size: 'small',
                interceptor: 'tmfsExamPlatform:myExam:join',
                clickFn: () => this.showApplyModal(record.id, record),
                text: '申请参加考试',
              }}
            />
          ),
        },
      ],
      searchForm: [
        {
          type: 'input',
          name: '考试名称',
          code: 'name',
          maxLength: 50,
        },
        {
          type: 'select',
          name: '考试级别',
          code: 'level',
          options: getDictionaryLabel('examLevel'),
        },
      ],
      searchData: {},
      publishStatus: true,
      activeKey: '2',
      examId: null,
      examInfo: {},
      runningData: [],
    };
  }

  //获取未完成数据
  getCompletedData = () => {
    this.setState({ tableLoading: true });
    let searchData = this.state.searchData;
    let data = {};
    for (const key in searchData) {
      if (searchData[key] || searchData[key] === 0) {
        data[key] = searchData[key];
      }
    }
    data.type = '1';
    data.pageSize = this.state.pageSize;
    data.currentPage = this.state.page;
    // return;
    queryCompletedExam(data)
      .then((res) => {
        if (res.data.code === 200) {
          if (res.data.data) {
            this.setState({
              total: res.data.data.total,
              tableData: res.data.data.list,
              tableLoading: false,
            });
          } else {
            this.setState({
              total: 0,
              tableData: [],
              tableLoading: false,
            });
          }
        } else {
          this.setState({ tableLoading: false });
          message.error(res.data.message || '查询数据失败!');
        }
      })
      .catch((err) => {
        this.setState({ tableLoading: false });
        message.error('查询数据失败!');
      });
  };
  //获取已完成数据
  getShouldData = () => {
    this.setState({ tableLoading: true });
    let data = {};

    data.type = '1';
    data.pageSize = this.state.pageSize;
    data.currentPage = this.state.page;
    // return;
    queryShouldExam(data)
      .then((res) => {
        if (res.data.code === 200) {
          if (res.data.data) {
            this.setState({
              total: res.data.data.total,
              tableData: res.data.data.list,
              tableLoading: false,
            });
          } else {
            this.setState({
              total: 0,
              tableData: [],
              tableLoading: false,
            });
          }
        } else {
          this.setState({ tableLoading: false });
          message.error(res.data.message || '查询数据失败!');
        }
      })
      .catch((err) => {
        this.setState({ tableLoading: false });
        message.error('查询数据失败!');
      });
  };
  //获取可报名数据
  getOpenData = () => {
    this.setState({ tableLoading: true });
    let searchData = this.state.searchData;
    let data = {};
    for (const key in searchData) {
      if (searchData[key] || searchData[key] === 0) {
        data[key] = searchData[key];
      }
    }
    data.type = '1';
    data.pageSize = this.state.pageSize;
    data.currentPage = this.state.page;
    // return;
    queryOpenExam(data)
      .then((res) => {
        if (res.data.code === 200) {
          if (res.data.data) {
            this.setState({
              total: res.data.data.total,
              tableData: res.data.data.list,
              tableLoading: false,
            });
          } else {
            this.setState({
              total: 0,
              tableData: [],
              tableLoading: false,
            });
          }
        } else {
          this.setState({ tableLoading: false });
          message.error(res.data.message || '查询数据失败!');
        }
      })
      .catch((err) => {
        this.setState({ tableLoading: false });
        message.error('查询数据失败!');
      });
  };
  //搜索框
  execSearchCompleted = (data) => {
    this.setState({ searchData: data, page: 1, tableData: [] }, () => {
      this.getCompletedData();
    });
  };
  execSearch = (data) => {
    this.setState({ searchData: data, page: 1, tableData: [] }, () => {
      this.getOpenData();
    });
  };
  //获取进行中的考试
  getRunningData = () => {
    queryRuningExam({ type: '1' })
      .then((res) => {
        // console.log(res.data);
        if (res.data.code == 200) {
          if (res.data.data && res.data.data.length) {
            this.setState({
              runningData: res.data.data,
              runningModalVisible: true,
            });
          } else {
            this.setState({
              runningData: res.data.data,
            });
          }
        }
      })
      .catch((err) => {
        // console.log(err);
      });
  };
  //修改页数changePage
  changePage = (page, pageSize) => {
    let activeKey = this.state.activeKey;
    this.setState({ page, pageSize }, () => {
      switch (activeKey) {
        case '1':
          this.getCompletedData();
          break;
        case '2':
          this.getShouldData();
          break;
        case '3':
          this.getOpenData();
          break;
        default:
          break;
      }
    });
  };
  //设置按钮加载动画开关
  buttonLoading = (flag) => {
    this.setState({ confirmLoading: flag });
  };
  //隐藏模态框
  hiddenModal = () => {
    this.setState({
      restartModalVisible: false,
      applyModalVisible: false,
      joinModalVisible: false,
      deleteModalVisible: false, //删除的模态框
      confirmLoading: false, //确认按钮异步等待
      record: null,
      examId: null,
      examInfo: {},
    });
  };
  hiddenRunningModal = () => {
    this.setState({ runningModalVisible: false });
  };
  //重考
  restart = () => {
    // console.log('重考');
    this.buttonLoading(true);
    restartExam({ examDetailId: this.state.examId })
      .then((res) => {
        if (res.data.code == 200) {
          sessionStorage.setItem(
            'examPaperData',
            JSON.stringify(res.data.data)
          );
          this.hiddenModal();
          getUrl('/TmfsExam/MyExam/TakeExam');
        } else {
          message.error(res.data.message || '重新参与考试失败');
          switch (this.state.activeKey) {
            case '1':
              this.getCompletedData();
              break;
            case '2':
              this.getShouldData();
              break;
            case '3':
              this.getOpenData();
              break;
            default:
              break;
          }
          // if (this.state.runningModalVisible) this.getRunningData();
          this.hiddenModal();
        }
      })
      .catch((err) => {
        message.error('开始考试失败，请检查网络连接');
        this.hiddenModal();
      });
  };
  start = () => {
    this.buttonLoading(true);
    startExam({ examDetailId: this.state.examId })
      .then((res) => {
        if (res.data.code == 200) {
          sessionStorage.setItem(
            'examPaperData',
            JSON.stringify(res.data.data)
          );
          this.hiddenModal();
          getUrl('/TmfsExam/MyExam/TakeExam');
        } else {
          message.error(res.data.message || '参加考试失败');
          switch (this.state.activeKey) {
            case '1':
              this.getCompletedData();
              break;
            case '2':
              this.getShouldData();
              break;
            case '3':
              this.getOpenData();
              break;
            default:
              break;
          }
          if (this.state.runningModalVisible) this.getRunningData();
          this.hiddenModal();
        }
      })
      .catch((err) => {
        message.error('开始考试失败，请检查网络连接');
        this.hiddenModal();
      });
  };
  showRestartModal = (examId, examInfo) => {
    this.setState({
      examId,
      examInfo,
      restartModalVisible: true,
    });
  };
  //参加考试
  join = () => {
    switch (this.state.activeKey) {
      case '1':
        this.restart();
        break;
      case '2':
        this.start();
        break;
    }
  };
  showJoinModal = (examId, examInfo) => {
    this.setState({
      examId,
      examInfo,
      joinModalVisible: true,
    });
  };
  apply = () => {
    this.buttonLoading(true);
    applyExamination(this.state.examId)
      .then((res) => {
        if (res.data.code == 200) {
          message.success('申请成功，请在未完成列表中参加考试');
        } else {
          message.error(res.data.message || '申请失败');
        }
        this.hiddenModal();
      })
      .catch((err) => {
        this.hiddenModal();
        message.error('申请失败');
      });
  };
  showApplyModal = (examId, examInfo) => {
    this.setState({
      examId,
      examInfo,
      applyModalVisible: true,
    });
  };
  tabChange = (activeKey) => {
    this.setState(
      {
        activeKey,
        pageSize: 10,
        page: 1,
        tableData: [],
        searchData: {},
      },
      () => {
        switch (activeKey) {
          case '1':
            this.getCompletedData();
            break;
          case '2':
            this.getShouldData();
            break;
          case '3':
            this.getOpenData();
            break;
          default:
            break;
        }
      }
    );
  };
  //防抖
  debounce(fn, ms = 500) {
    let timeoutId;
    return function() {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        fn.apply(this, arguments);
      }, ms);
    };
  }
  componentWillMount() {
    if (sessionStorage.getItem('examPaperData'))
      sessionStorage.removeItem('examPaperData');
  }
  componentDidMount() {
    this.getShouldData();
    this.getRunningData();
  }
  //组件销毁时取消setState
  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }
  render() {
    //多选行配置
    return (
      <div id='evaluate'>
        <div className='myProjectsBody'>
          <Tabs onChange={this.tabChange}>
            <Tabs.TabPane tab='未完成' key='2'>
              {this.state.activeKey === '2' ? (
                <div className='tabstyle'>
                  <div className='bigContent1' id='projectDetail'>
                    <div className='tableDiff'>
                      <Table
                        rowKey='id'
                        loading={this.state.tableLoading}
                        style={{ marginTop: 10 }}
                        scroll={{ x: '100' }}
                        rowSelection={null}
                        columns={this.state.shouldTableColumns}
                        dataSource={this.state.tableData}
                        pagination={{
                          total: this.state.total,
                          pageSize: this.state.pageSize,
                          current: this.state.page,
                          showSizeChanger: true,
                          onChange: this.changePage,
                          onShowSizeChange: this.changePageSize,
                          showTotal: (total) => '共 ' + total + ' 条',
                        }}
                        bordered
                      />
                    </div>
                  </div>
                </div>
              ) : null}
            </Tabs.TabPane>

            <Tabs.TabPane tab='已完成' key='1'>
              {this.state.activeKey === '1' ? (
                <div className='tabstyle'>
                  <div className='bigContent1'>
                    <AdvancedSearchForm
                      execSearch={this.execSearchCompleted}
                      formData={this.state.searchForm}
                    />
                  </div>
                  <div className='bigContent1' id='projectDetail'>
                    <div className='tableDiff'>
                      <Table
                        rowKey='id'
                        loading={this.state.tableLoading}
                        style={{ marginTop: 10 }}
                        scroll={{ x: '100' }}
                        rowSelection={null}
                        columns={this.state.completedTableColumns}
                        dataSource={this.state.tableData}
                        pagination={{
                          total: this.state.total,
                          pageSize: this.state.pageSize,
                          current: this.state.page,
                          showSizeChanger: true,
                          onChange: this.changePage,
                          onShowSizeChange: this.changePageSize,
                          showTotal: (total) => '共 ' + total + ' 条',
                        }}
                        bordered
                      />
                    </div>
                  </div>
                </div>
              ) : null}
            </Tabs.TabPane>
            <Tabs.TabPane tab='公开考试' key='3'>
              {this.state.activeKey === '3' ? (
                <div className='tabstyle'>
                  <div className='bigContent1'>
                    <AdvancedSearchForm
                      execSearch={this.execSearch}
                      formData={this.state.searchForm}
                    />
                  </div>
                  <div className='bigContent1' id='projectDetail'>
                    <div className='tableDiff'>
                      <Table
                        rowKey='id'
                        loading={this.state.tableLoading}
                        style={{ marginTop: 10 }}
                        scroll={{ x: '100' }}
                        rowSelection={null}
                        columns={this.state.openTableColumns}
                        dataSource={this.state.tableData}
                        pagination={{
                          total: this.state.total,
                          pageSize: this.state.pageSize,
                          current: this.state.page,
                          showSizeChanger: true,
                          onChange: this.changePage,
                          onShowSizeChange: this.changePageSize,
                          showTotal: (total) => '共 ' + total + ' 条',
                        }}
                        bordered
                      />
                    </div>
                  </div>
                </div>
              ) : null}
            </Tabs.TabPane>
          </Tabs>
        </div>

        <NewModal
          modalOptions={{
            width: '400px',
            title: '申请参加考试',
            visible: this.state.applyModalVisible,
            onCancel: this.hiddenModal,
            destroyOnClose: true,
          }}
          buttonOptions={{
            position: 'right',
            btnList: [
              {
                key: 1,
                onClick: this.hiddenModal,
                text: '取消',
              },
              {
                key: 0,
                onClick: this.apply,
                text: '确定',
                type: 'primary',
                loading: this.state.confirmLoading,
              },
            ],
          }}
        >
          <InfoCircleOutlined
            style={{
              fontSize: '28px',
              color: '#1890FF',
              float: 'left',
              backgroundColor: '#29F2',
              padding: 8,
              borderRadius: '50%',
            }}
          />
          <div
            style={{
              fontSize: 14,
              marginLeft: 60,
              fontWeight: 700,
              height: 44,
              lineHeight: '44px',
            }}
          >
            确定申请参加考试？
          </div>
        </NewModal>

        <NewModal
          modalOptions={{
            width: '480px',
            title: '考试须知',
            visible: this.state.joinModalVisible,
            onCancel: this.hiddenModal,
            destroyOnClose: true,
            maskClosable: false,
          }}
          buttonOptions={{
            position: 'center',
            btnList: [
              {
                key: 0,
                onClick: this.join,
                text: '同意并继续',
                type: 'primary',
                loading: this.state.confirmLoading,
              },
              {
                key: 1,
                onClick: this.hiddenModal,
                text: '取消',
              },
            ],
          }}
        >
          <div style={{ height: 450, overflow: 'scroll' }}>
            <Typography.Title level={5}>1.考试要求</Typography.Title>
            <Text>{examInstructions.requirement}</Text>
            <Typography.Title level={5}>2.考试规则</Typography.Title>
            <Text>{examInstructions.rule}</Text>
          </div>
        </NewModal>

        <NewModal
          modalOptions={{
            width: '600px',
            title: '未完成考试提示',
            visible: this.state.runningModalVisible,
            onCancel: this.hiddenRunningModal,
            destroyOnClose: true,
          }}
          buttonOptions={{
            position: 'right',
            btnList: [
              {
                key: 1,
                onClick: this.hiddenRunningModal,
                text: '取消',
              },
            ],
          }}
        >
          <Table
            dataSource={this.state.runningData}
            rowKey='id'
            scroll={{ x: '100' }}
            rowSelection={null}
            columns={this.state.runningTableColumns}
            pagination={false}
            bordered
          ></Table>
        </NewModal>
      </div>
    );
  }
}

export default MyExam;
